<template>
  <div class="vote-wrapper">
    <x-header class="nav-header">发起投票<a slot="right"></a></x-header>
    <group title="投票说明">
      <x-input title="投票标题" v-model="form.title" placeholder="请输入投票名称"></x-input>
      <x-textarea title="投票内容" :max="800" :rows="5" v-model="form.content" placeholder="请简单描述下投票内容"></x-textarea>
      <!-- <uploader
        :max="10"
        :images="form.images"
        :handleClick="false"
        :show-header="false"
        :readonly="false"
        :upload-url="uploadUrl"
        name="img"
        size="small"
        @preview="previewMethod($event)">
      </uploader> -->
      <uploadImage :imglist.sync="form.images"></uploadImage>
      <datetime :min-year="1970" placeholder="请选择" v-model="form.endTime" format="YYYY-MM-DD HH:mm" title="截止时间"></datetime>
    </group>
    <group>
      <x-switch id="mySwitch" title="设置多选" v-model="form.isMulti"></x-switch>
    </group>
    <group title="投票项目" :key="i" v-for="(item,i) in form.list">
      <x-input :title="`${i+1}.投票名称`" placeholder="请输入投票名称" v-model="item.title"></x-input>
      <!-- <uploader
        :max="10"
        :images="item.images"
        :handleClick="false"
        :show-header="false"
        :readonly="false"
        :upload-url="uploadUrl"
        name="img"
        size="small"
        @preview="previewMethod($event)">
      </uploader> -->
      <uploadImage :imglist.sync="item.images"></uploadImage>
    </group>
    <x-button class="add" mini @click.native="addOption">添加</x-button>
    <x-button @click.native="isValid" class="btn" type="primary">发起投票</x-button>
    <confirm v-model="showTimeTips"
      title="提示"
      @on-cancel="showTimeTips=false"
      @on-confirm="showTimeTips=false;validTime=true;confirmShowNumTips()">
        <p style="text-align:center;">请给大家多一点投票时间哦，最短2个小时~</p>
    </confirm>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
// import Uploader from 'vux-uploader';
import uploadImage from '../../components/UploadImage'
import { getUnixTime } from '../../js/utils'
import { upload } from '../../api/'
import {
  XHeader,
  Group,
  XButton,
  XTextarea,
  Datetime,
  Confirm,
  XSwitch,
  XInput
} from 'vux';

const IndexStore = namespace('publish');

@Component({
  components: {
    XHeader,
    Datetime,
    uploadImage,
    XSwitch,
    XTextarea,
    Group,
    Confirm,
    XButton,
    XInput
  }
})
export default class VoteAdd extends Vue {
  @IndexStore.Action getCreatePost;
  imgEnLarge = false
  showTimeTips = false
  validTime = false
  form = {
    title: '',
    content: '',
    endTime: '',
    isMulti: false,
    images: [],
    list: [],
    type: 2
  }
  uploadUrl = upload
  imgUrl = ''
  previewMethod (e) {
    this.imgUrl = e.url;
    this.imgEnLarge = true;
  }
  handleImgEnlarge () {
    this.imgEnLarge = false;
  }
  addOption () {
  	this.form.list.push({ title: '', images: [] });
  }
  isValid () {
    let flag = true
    const { endTime, content, images, title, list } = this.form
    if (list.length > 0) {
      for (let i = 0; i < list.length; i++) {
        if (!list[i].title) {
          flag = false
          this.$vux.toast.text('请添加投票选项的标题', 'middle');
          break;
        }
        // if (list[i].images.length === 0) {
        //   flag = false
        //   this.$vux.toast.text('请添加投票选项的图片', 'middle');
        //   break;
        // }
      }
    }
    if (list.length === 0) {
      flag = false
      this.$vux.toast.text('请添加投票选项', 'middle');
    }
    if (!endTime) {
      flag = false
      this.$vux.toast.text('请选择截止时间', 'middle')
    }
    if (images.length === 0) {
      flag = false
      this.$vux.toast.text('请添加投票的图片', 'middle')
    }
    if (!content) {
      flag = false
      this.$vux.toast.text('请输入投票说明', 'middle');
    }
    if (!title) {
      flag = false
      this.$vux.toast.text('请输入投票名称', 'middle');
    }
    if (flag) {
      this.confirmShowNumTips()
    }
  }
  confirmShowNumTips () {
    const endTime = new Date(this.form.endTime + ':00').getTime()
    const currentTime = new Date().getTime()
    if (endTime - currentTime < 2 * 60 * 60 * 1000 && this.validTime === false) {
      this.showTimeTips = true;
      return;
    } else {
      this.validTime = true
    }
    this.doPublish()
  }
  doPublish () {
    const { endTime, content, images, title, type, isMulti, list } = this.form
    const params = {
      endTime: getUnixTime(endTime),
      title: title,
      content: `<pre>${content}</pre>`,
      type: type,
      imgs: images,
      voteObj: {
        isMulti: isMulti,
        list: list
      }
    }
    this.getCreatePost(params).then(msg => {
      if (msg) {
        this.$vux.toast.text(msg, 'middle');
      } else {
        this.$router.push('/home')
        this.$vux.toast.text('发布成功', 'middle');
      }
    })
  }
}
</script>
<style lang="less">
.vote-wrapper {
  padding-bottom: 100px;
  padding-top: 46px;
  .bounce-enter-active {
      animation: bounce-in .3s;
    }
    .bounce-leave-active {
      animation: bounce-in .3s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
  .nav-header {
    .vux-header-left {
      .left-arrow {
        top: -10px;
        left: -5px;
        padding: 5px;
        &:before {
          top: 13px;
          left: 7px;
        }
      }
    }
  }
  .img {
      width: 100%;
    }
    .img-enlarge {
      z-index: 99999;
      position: fixed;
      background: #000000;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  #mySwitch {
    background: #ffffff;
  }
  .add {
    float: right;
    margin: 15px;
    width: 80px;
  }
  .btn {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
</style>
